<template>
  <div class="login-secondary">
    <BackPreviou class="back-btn" @showMain="handelClick" />
    <div class="content">
      <Form
        :model="formState"
        style="width: 1010px"
        :label-col="{ style: { width: '210px' } }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        label-align="right"
        :colon="false"
      >
        <div v-if="secondaryName === 'JE_SYS_WXQUICKLOGIN'" class="only-office">
          <FormItem name="WX_LOGIN_APPID" class="WX_LOGIN_APPID" label="AppID">
            <Input v-model:value="formState.WX_LOGIN_APPID" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('login.secondary.wxAppIdTip') }}</i>
            </div>
          </FormItem>
          <FormItem name="WX_LOGIN_APPSECRET" class="WX_LOGIN_APPSECRET" label="AppSecret">
            <Input v-model:value="formState.WX_LOGIN_APPSECRET" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('login.secondary.wxAppSecretTip') }}</i>
            </div>
          </FormItem>
          <FormItem
            name="WX_LOGIN_APPURL"
            class="WX_LOGIN_APPURL"
            :label="$t('login.secondary.website')"
          >
            <Input v-model:value="formState.WX_LOGIN_APPURL" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('login.secondary.wxDomainTip') }}</i>
            </div>
          </FormItem>
        </div>
        <!-- todo -->
        <div v-else-if="secondaryName === 'JE_SYS_DDQUICKLOGIN'" class="only-office">
          <FormItem name="DD_LOGIN_CLIENTID" class="DD_LOGIN_CLIENTID" label="ClientID">
            <Input v-model:value="formState.DD_LOGIN_CLIENTID" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('login.secondary.ddClientIDTip') }}</i>
            </div>
          </FormItem>
          <FormItem name="DD_LOGIN_CLIENTSECRET" class="DD_LOGIN_CLIENTSECRET" label="ClientSecret">
            <Input v-model:value="formState.DD_LOGIN_CLIENTSECRET" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('login.secondary.ddClientSecretTip') }}</i>
            </div>
          </FormItem>
          <FormItem name="DD_LOGIN_REDIRECTURL" class="DD_LOGIN_REDIRECTURL" label="RedirectUri">
            <Input v-model:value="formState.DD_LOGIN_REDIRECTURL" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('login.secondary.ddRedirectUriTip') }}</i>
            </div>
          </FormItem>
        </div>
        <div v-else-if="secondaryName === 'JE_SYS_FSQUICKLOGIN'" class="only-office">
          <FormItem name="FS_LOGIN_CLIENTID" class="FS_LOGIN_CLIENTID" label="ClientID">
            <Input v-model:value="formState.FS_LOGIN_CLIENTID" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('login.secondary.fsClientIDTip') }}</i>
            </div>
          </FormItem>
          <FormItem name="FS_LOGIN_CLIENTSECRET" class="FS_LOGIN_CLIENTSECRET" label="ClientSecret">
            <Input v-model:value="formState.FS_LOGIN_CLIENTSECRET" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('login.secondary.fsClientSecretTip') }}</i>
            </div>
          </FormItem>
          <FormItem name="FS_LOGIN_REDIRECTURL" class="FS_LOGIN_REDIRECTURL" label="Redirecturi">
            <Input v-model:value="formState.FS_LOGIN_REDIRECTURL" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('login.secondary.fsRedirecturiTip') }}</i>
            </div>
          </FormItem>
        </div>
        <div v-else-if="secondaryName === 'JE_SYS_QQQUICKLOGIN'" class="only-office">
          <FormItem name="QQ_LOGIN_APPID" class="QQ_LOGIN_APPID" label="AppID">
            <Input v-model:value="formState.QQ_LOGIN_APPID" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('login.secondary.qqAppIDTip') }}</i>
            </div>
          </FormItem>
          <FormItem name="QQ_LOGIN_APPKEY" class="QQ_LOGIN_APPKEY" label="AppSecret">
            <Input v-model:value="formState.QQ_LOGIN_APPKEY" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('login.secondary.qqAppSecretTip') }}</i>
            </div>
          </FormItem>
          <FormItem
            name="QQ_LOGIN_APPURL"
            class="QQ_LOGIN_APPURL"
            :label="$t('login.secondary.website')"
          >
            <Input v-model:value="formState.QQ_LOGIN_APPURL" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('login.secondary.qqDomainTip') }}</i>
            </div>
          </FormItem>
        </div>
        <div v-else-if="secondaryName === 'JE_SYS_WLQUICKLOGIN'" class="wps">
          <FormItem name="WL_LOGIN_CLIENTID" class="WL_LOGIN_CLIENTID" label="ClientID">
            <Input v-model:value="formState.WL_LOGIN_CLIENTID" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('login.secondary.welinkClientIDTip') }}</i>
            </div>
          </FormItem>
          <FormItem name="WL_LOGIN_CLIENTSECRET" class="WL_LOGIN_CLIENTSECRET" label="ClientSecret">
            <Input v-model:value="formState.WL_LOGIN_CLIENTSECRET" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('login.secondary.welinkClientSecretTip') }}</i>
            </div>
          </FormItem>
          <FormItem name="WL_LOGIN_REDIRECTURL" class="WL_LOGIN_REDIRECTURL" label="Redirecturi">
            <Input v-model:value="formState.WL_LOGIN_REDIRECTURL" class="myInput"> </Input>
            <div class="text">
              <i>{{ $t('login.secondary.welinkRedirecturiTip') }}</i>
            </div>
          </FormItem>
        </div>
      </Form>
    </div>
  </div>
</template>

<script>
  import BackPreviou from '@/components/back-previou.vue';
  import { Input, Form, Modal } from '@jecloud/ui';
  import { onUnmounted, reactive } from 'vue';
  import { useOpenDialog } from '@/hooks';
  import VueEvent from '@/helper/model/event';
  import { saveConfigData } from '@/api';
  import { onScroll } from '@/utils/utils';
  export default {
    name: 'LoginSecondary',
    components: {
      Form,
      FormItem: Form.Item,
      Input,
      BackPreviou,
    },
    props: {
      secondaryName: {
        type: String,
        default: '',
      },
      dataAll: {
        type: Array,
        default: () => [],
      },
    },
    emits: ['showMain'],
    setup(props, { emit }) {
      // code：相应子页面携带的参数
      const codeConfig = {
        JE_SYS_WXQUICKLOGIN: 'login-wechat',
        JE_SYS_DDQUICKLOGIN: 'login-dingding',
        JE_SYS_FSQUICKLOGIN: 'login-feishu',
        JE_SYS_QQQUICKLOGIN: 'login-qq',
        JE_SYS_WLQUICKLOGIN: 'login-welink',
      };
      // 关闭子页面
      const closePage = () => {
        emit('showMain', false);
      };
      // 点击返回的回调
      const handelClick = () => {
        // 左侧导航栏是否允许切换
        VueEvent.emit('saveResult', isChange());
        if (isChange()) return closePage();
        useOpenDialog({
          attribute: codeConfig[props.secondaryName],
          allFields: JSON.stringify(formState),
        });
      };
      // 表单数据
      let formState = reactive({
        WX_LOGIN_APPID: '',
        WX_LOGIN_APPSECRET: '',
        WX_LOGIN_APPURL: '',
        DD_LOGIN_CLIENTID: '',
        DD_LOGIN_CLIENTSECRET: '',
        DD_LOGIN_REDIRECTURL: '',
        FS_LOGIN_CLIENTID: '',
        FS_LOGIN_CLIENTSECRET: '',
        FS_LOGIN_REDIRECTURL: 'dev.suanbanyun.com',
        QQ_LOGIN_APPID: '',
        QQ_LOGIN_APPKEY: '',
        QQ_LOGIN_APPURL: '',
        WL_LOGIN_CLIENTID: '',
        WL_LOGIN_CLIENTSECRET: '',
        WL_LOGIN_REDIRECTURL: 'dev.suanbanyun.com',
      });

      // 对比项
      let meta = {};
      let res = {};
      // 数据用于回显
      const changeDataType = () => {
        // 得到本页面的数据
        res = props.dataAll.filter((item) => {
          return (
            item.key === 'JE_SYS_WXQUICKLOGIN' ||
            item.key === 'JE_SYS_DDQUICKLOGIN' ||
            item.key === 'JE_SYS_FSQUICKLOGIN' ||
            item.key === 'JE_SYS_QQQUICKLOGIN' ||
            item.key === 'JE_SYS_WLQUICKLOGIN'
          );
        });
        // 回显赋值
        // console.log(res);
        res.find((td) => {
          td.items.find((item) => {
            formState[item.code] = item.value;
          });
        });
        meta = JSON.parse(JSON.stringify(formState));
      };
      changeDataType('props', props.dataAll);

      // 表单数据是否改变
      const isChange = () => {
        return Object.keys(meta).every((item) => {
          return meta[item] === formState[item];
        });
      };

      // 点击保存回调
      const clickCallback = () => {
        if (!isChange()) {
          saveConfigData({
            attribute: codeConfig[props.secondaryName],
            allFields: JSON.stringify(formState),
            type: '',
          }).then(
            (meta = JSON.parse(JSON.stringify(formState))),
            Modal.notice('保存成功', 'success'),
            // 修改后通知全局数据改变
            VueEvent.emit('changeAllData', {
              item: codeConfig[props.secondaryName],
              formState,
            }),
          );
        } else {
          // 如果显示了子页面就不提示
          Modal.notice('无数据操作!', 'info');
        }
      };

      // 滚动
      const onScrollDe = () => {
        setTimeout(() => {
          onScroll();
        }, 0);
      };
      VueEvent.on('closeEvent', closePage);
      VueEvent.on('toolbarSaveEvent', clickCallback);
      VueEvent.on('fadeScrollSed', onScrollDe);
      VueEvent.on('isSave', handelClick);
      onUnmounted(() => {
        VueEvent.off('closeEvent', closePage);
        VueEvent.off('fadeScrollSed', onScrollDe);
        VueEvent.off('isSave', handelClick);
        VueEvent.off('toolbarSaveEvent', clickCallback);
      });

      return { handelClick, formState };
    },
  };
</script>

<style lang="less" scoped>
  .login-secondary {
    padding-top: 30px;
    .content {
      padding-top: 20px;
    }
  }
</style>
